<script setup lang="ts">
import { ref } from 'vue'

// 标签栏状态管理
const activeTab = ref(0)
const switchTab = (index: number) => {
    activeTab.value = index
}

// 模拟数据 - 时间线数据
const timelineItems = [
    {
        week: '孕6-8周',
        title: '第一次产检（已完成）',
        date: '2023年4月18日',
        description: '确认宫内妊娠，测量胎芽长度，听取胎心，评估早孕反应。',
        tags: ['B超检查', '血常规', '尿常规'],
        isCompleted: true,
        isCurrent: false
    },
    {
        week: '孕11-13周',
        title: '第二次产检（NT检查）',
        date: '2023年5月24日',
        description: 'NT超声检查，测量胎儿颈后透明带厚度，筛查染色体异常风险。',
        tags: ['NT超声', '唐筛', '血压监测'],
        isCompleted: false,
        isCurrent: true
    },
    {
        week: '孕16-20周',
        title: '第三次产检（大排畸）',
        date: '预计2023年7月上旬',
        description: '大排畸超声检查，全面检查胎儿各器官发育情况，确定胎儿性别。',
        tags: ['四维彩超', '血糖检测', '肝肾功能'],
        isCompleted: false,
        isCurrent: false
    },
    {
        week: '孕24-26周',
        title: '第四次产检（糖筛）',
        date: '预计2023年8月上旬',
        description: '进行糖尿病筛查，监测血压和胎儿发育情况，了解胎动情况。',
        tags: ['糖耐量测试', 'B超检查', '血压监测'],
        isCompleted: false,
        isCurrent: false
    }
]

// 返回上一页
const goBack = () => {
    uni.navigateBack()
}

// 打开通知
const openNotifications = () => {
    uni.showToast({
        title: '打开通知中心',
        icon: 'none'
    })
}

// 修改预约
const modifyAppointment = () => {
    uni.showToast({
        title: '修改预约',
        icon: 'none'
    })
}

// 设置提醒
const setReminder = () => {
    uni.showToast({
        title: '设置提醒',
        icon: 'none'
    })
}

// 预约产检
const scheduleCheckup = () => {
    uni.showToast({
        title: '预约产检',
        icon: 'none'
    })
}

// 添加记录
const addRecord = () => {
    uni.showToast({
        title: '添加产检记录',
        icon: 'none'
    })
}
</script>

<template>
    <view class="prenatal-checkup-container">
        <!-- 页面头部 -->
        <view class="header">
            <view class="header-left">
                <text class="back-icon" @click="goBack">
                    <text class="iconfont icon-left"></text>
                </text>
                <text class="page-title">产检管理</text>
            </view>
            <text class="notification-icon" @click="openNotifications">
                <text class="iconfont icon-notification"></text>
            </text>
        </view>

        <!-- 标签页 -->
        <view class="tab-bar">
            <view class="tab-item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
                产检时间表
            </view>
            <view class="tab-item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
                检查记录
            </view>
        </view>

        <!-- 主内容区 -->
        <scroll-view class="main-content" scroll-y>
            <block v-if="activeTab === 0">
                <!-- 下一次产检 -->
                <view class="next-checkup">
                    <view class="next-checkup-title">
                        <text class="iconfont icon-calendar-check"></text>
                        <text>下一次产检</text>
                    </view>
                    <view class="next-checkup-content">
                        <view class="checkup-date">
                            <view class="checkup-day">24</view>
                            <view class="checkup-month">5月</view>
                        </view>
                        <view class="checkup-info">
                            <view class="checkup-name">第一次系统产检</view>
                            <view class="checkup-time">上午9:30 · 市妇幼保健院</view>
                            <view class="checkup-countdown">距离产检还有8天</view>
                        </view>
                    </view>
                    <view class="checkup-actions">
                        <view class="checkup-action button-secondary" @click="modifyAppointment"
                            >修改预约</view
                        >
                        <view class="checkup-action button-primary" @click="setReminder"
                            >设置提醒</view
                        >
                    </view>
                </view>

                <!-- 产检时间线 -->
                <view class="checkup-timeline">
                    <view v-for="(item, index) in timelineItems" :key="index" class="timeline-item">
                        <view class="timeline-badge" :class="{ future: !item.isCompleted }">
                            <text
                                class="iconfont"
                                :class="item.isCompleted ? 'icon-check' : 'icon-stethoscope'"
                            ></text>
                        </view>
                        <view class="timeline-content">
                            <view class="timeline-week">{{ item.week }}</view>
                            <view class="timeline-title">{{ item.title }}</view>
                            <view class="timeline-date">
                                <text class="iconfont icon-calendar"></text>
                                <text>{{ item.date }}</text>
                            </view>
                            <view class="timeline-desc">{{ item.description }}</view>
                            <view class="timeline-tags">
                                <view
                                    v-for="(tag, tagIndex) in item.tags"
                                    :key="tagIndex"
                                    class="timeline-tag"
                                >
                                    {{ tag }}
                                </view>
                            </view>
                            <view class="timeline-buttons" v-if="item.isCompleted">
                                <view class="timeline-button button-secondary">查看报告</view>
                                <view class="timeline-button button-secondary">添加照片</view>
                            </view>
                            <view class="timeline-buttons" v-else-if="item.isCurrent">
                                <view
                                    class="timeline-button button-primary"
                                    @click="scheduleCheckup"
                                    >预约产检</view
                                >
                            </view>
                        </view>
                    </view>
                </view>
            </block>

            <block v-if="activeTab === 1">
                <view class="record-list">
                    <!-- 这里可以添加检查记录列表，当前原型中没有展示，可以根据需求添加 -->
                    <view class="empty-state">
                        <text>暂无检查记录</text>
                    </view>
                </view>
            </block>

            <!-- 浮动按钮 -->
            <view class="floating-button" @click="addRecord">
                <text class="iconfont icon-plus"></text>
            </view>
        </scroll-view>
    </view>
</template>

<style scoped lang="scss">
.prenatal-checkup-container {
    background-color: #f5f5f5;
    height: 100vh;
}

.header {
    background-color: #ffffff;
    padding: 20rpx 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #f0f0f0;
    height: 88rpx;
}

.header-left {
    display: flex;
    align-items: center;
}

.back-icon {
    margin-right: 16rpx;
    font-size: 36rpx;
}

.page-title {
    font-size: 36rpx;
    font-weight: 500;
}

.notification-icon {
    font-size: 36rpx;
    color: #333333;
}

.tab-bar {
    display: flex;
    background-color: #ffffff;
    border-bottom: 2rpx solid #f0f0f0;
}

.tab-item {
    flex: 1;
    text-align: center;
    padding: 28rpx 0;
    font-size: 28rpx;
    color: #666;
    position: relative;
}

.tab-item.active {
    color: #ff9fb5;
    font-weight: 500;
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 6rpx;
    background-color: #ff9fb5;
    border-radius: 6rpx 6rpx 0 0;
}

.main-content {
    height: calc(100vh - 88rpx - 76rpx);
    overflow-y: auto;
    padding-bottom: 20rpx;
}

.next-checkup {
    background-color: #ffeaef;
    border-radius: 24rpx;
    margin: 32rpx;
    padding: 32rpx;
}

.next-checkup-title {
    font-size: 30rpx;
    font-weight: 500;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
}

.next-checkup-title .iconfont {
    color: #ff9fb5;
    margin-right: 16rpx;
}

.next-checkup-content {
    display: flex;
    align-items: center;
}

.checkup-date {
    width: 100rpx;
    height: 100rpx;
    background-color: #ff9fb5;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    margin-right: 24rpx;
}

.checkup-day {
    font-size: 40rpx;
    font-weight: 600;
    line-height: 1;
}

.checkup-month {
    font-size: 24rpx;
    margin-top: 8rpx;
}

.checkup-info {
    flex: 1;
}

.checkup-name {
    font-size: 28rpx;
    font-weight: 500;
    margin-bottom: 8rpx;
}

.checkup-time {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 8rpx;
}

.checkup-countdown {
    font-size: 24rpx;
    color: #ff6b8b;
}

.checkup-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20rpx;
}

.checkup-action {
    font-size: 26rpx;
    padding: 12rpx 24rpx;
    border-radius: 12rpx;
    margin-left: 16rpx;
}

.button-primary {
    background-color: #ff9fb5;
    color: white;
}

.button-secondary {
    background-color: #f5f5f5;
    color: #666;
}

.checkup-timeline {
    padding: 32rpx;
}

.timeline-item {
    display: flex;
    margin-bottom: 48rpx;
    position: relative;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    top: 80rpx;
    left: 32rpx;
    width: 2rpx;
    height: calc(100% - 32rpx);
    background-color: #e0e0e0;
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-badge {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    background-color: #ff9fb5;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    margin-right: 24rpx;
    flex-shrink: 0;
    z-index: 1;
}

.timeline-badge.future {
    background-color: #e0e0e0;
    color: #999;
}

.timeline-content {
    flex: 1;
    background-color: #ffffff;
    border-radius: 24rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.timeline-week {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 12rpx;
}

.timeline-title {
    font-size: 32rpx;
    font-weight: 500;
    margin-bottom: 20rpx;
}

.timeline-date {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #666;
    margin-bottom: 24rpx;
}

.timeline-date .iconfont {
    color: #ff9fb5;
    margin-right: 12rpx;
}

.timeline-desc {
    font-size: 26rpx;
    color: #666;
    line-height: 1.5;
    margin-bottom: 24rpx;
}

.timeline-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    margin-bottom: 24rpx;
}

.timeline-tag {
    font-size: 24rpx;
    padding: 8rpx 16rpx;
    border-radius: 8rpx;
    background-color: #f5f5f5;
    color: #666;
}

.timeline-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
}

.timeline-button {
    font-size: 26rpx;
    padding: 12rpx 24rpx;
    border-radius: 12rpx;
    text-align: center;
}

.floating-button {
    position: fixed;
    right: 40rpx;
    bottom: 160rpx;
    width: 112rpx;
    height: 112rpx;
    border-radius: 56rpx;
    background-color: #ff9fb5;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8rpx 24rpx rgba(255, 159, 181, 0.4);
    z-index: 10;
}

.floating-button .iconfont {
    font-size: 48rpx;
}

.empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400rpx;
    color: #999;
    font-size: 28rpx;
}
</style>
